Do you want to make your application to the next level with Angular ?. If yes then lets learn.

We will start from basic “I don’t even know how JavaScript works to actually understand how Angular works and make a real application.

You will learn all the logic and practice behind Angular in different modules and as we advance through the course we will be increasing the difficulty.

Angular was built on top of Typescript.

Note:

  • There will be 2 demo sessions. Demo Session is Free
  • After 2 demo sessions, full amount should be paid within 1 week
  • In case of any query on training:
    Please mail me at: quickitdotnet@gmail.com

Don’t know how to use Typescript ?

Don’t worry, there is an optional full Typescript course at the end where you will learn all the basics of Typescript so you don’t miss out on anything.

To sum everything up, you will learn in this course:

  • We will learn how to install Angular app.
  • Understand how use the most basic tools to create a simple App.
  • Handle mor complex code with services and directives.
  • Apply authentication and route preventing.
  • How to use typescript with or without Angular.
  • Use external libraries like RXJS, Angular Material and NGX Bootstrap.
  • Create practice projects and also an authentication template..

Course Content

What you will learn

  • Develop modern, complex, responsive and scalable web applications with Angular 10 Fully understand the architecture behind an Angular 10 application and how to use it
  • Use their gained, deep understanding of the Angular 10 fundamentals to quickly establish themselves as frontend developers
  • Create single-page applications with one of the most modern JavaScript frameworks out there
Introduction
  • What is Angular?
  • Setup for local environment
  • Let me introduce you to this course and give a rough outline over what you’re going to learn!

What is Angular?

  • First things first! What is Angular? Why would you want to learn it? This lecture helps answering this question
  • So many Angular versions! What’s up with them and which version does this course cover?

Module Introduction

How an Angular App gets Loaded and Started

Angular is all about Components! This lecture takes a closer look and explains what Components really are.

Components are Important!

Thus far, we worked with the AppComponent. Time to change this and create our first own component.

Understanding the Role of AppModule and Component Declaration

Did you recognize that AppModule file? It’s super important – this lecture explains what it’s about!

Using Custom Components

Now that we learned how to create and register our own components, let’s now dive into using them.

Creating Components with the CLI & Nesting Components

We can also use the CLI to create components. This lecture explains how that then works and also how you may nest components.

  • Working with Component and their Styles
  • Fully Understanding the Component Selector

What is Databinding? 

  • String Interpolation Property Binding
  • Property Binding vs String Interpolation
  • Event Binding
  • Bindable Properties and Events
  • Passing and Using Data with Event Binding
  • Important: Forms Module is Required for Two-Way-Binding! Two-Way-Databinding
  • Combining all Forms of Databinding
Directives
In this module, we will learn what the built-in directives that we mostly use in angular5, and usage of Host Listener and Host Binding. Also, we can learn how to create attribute directives.
  • Structural directives (Built-in Directives (ngIF, ngFor, ngSwitch)
  • Style and Class Directives ( ngClass, ngStyle)
  • Attribute directives
  • Host Listener and Host Binding
  • Applying CSS Classes Dynamically with ngClass
  • Getting the Index when using ngFor
Components and Data Binding deep dive:
  • Module Introduction
  • Splitting Apps into Components
  • Property & Event Binding Overview
  • Binding to Custom Properties
  • Assigning an Alias to Custom Properties
  • Binding to Custom Events
  • Assigning an Alias to Custom Events
  • Custom Property and Event Binding Summary
  • Understanding View Encapsulation
  • More on View Encapsulation
  • Using Local References in Templates
  • Getting Access to the Template & DOM with @ViewChild
  • Projecting Content into Components with ng-content
  • Understanding the Component Lifecycle
  • Seeing Lifecycle Hooks in Action
  • Lifecycle Hooks and Template Access
  • Getting Access to ng-content with @ContentChild
  • Wrap Up
Data binding
  • Property binding and Interpolation
  • Event binding
  • Two-way Binding
  • Use of @Input and @Output
Components
We will learn one of the major concepts in angular6 i.e., components. And we can also learn how to create a dynamic component using ngComponentOutlet.
  • What are components?
  • Understanding Components lifecycle hooks
  • Creating and using components
  • Dynamic components using ngComponentOutlet
Modules
In this module, we will learn what modules are, and usage of modules in a different manner. We can also learn what AOT compilation is.
  • Root App module
  • Ahead-Of-Time(AOT) Compilation
  • Feature modules
  • Lazy Loading
  • Shared Module

Forms

In this module, we will learn two different types of creating forms in angular5 i.e. template driven and model-driven. And we will also learn how to do validations and how to create custom validators.

  • Template Driven Forms
  • Model Driven & Reactive Forms
  • Form with @ViewChild
  • Validations
  • Resetting & submitting forms
Pipes
In this module we will learn what pipes are, and how to pass parameters to pipes, and how to create custom pipes.

And we will also learn new concept Async pipes that is introduced in angular5.

  • Why pipes are useful?
  • Parameterizing pipes
  • Custom pipes
  • Pure and Impure pipes
  • Async pipes
Services & Dependency injection
In this module we will learn what are services and how do they communicate using HTTP protocol to the server.

And we will also learn about very interesting topic Dependency Injection in angular.

  • Creating Service
  • Logger Service
  • $http Service
  • Injectors
  • Providers
  • Tokens
  • Using Services for Cross-Component Communication
  • Understanding the Hierarchical Injector
  • Injecting the Logging Service into Components
Routing
In this module, we will learn the introduction for routing in angular and how to navigate between views, how to do parameterized routing.
  • Introduction
  • Configuring & Navigating
  • Parameterized routes

Crud Operations Using Http Service

In this module we will create an application with an end-to-end start from the server to client, getting response and requests using HTTP service.

  • Creating Services
  • Creating Components
  • Creating Routings
  • Configuring NgModule
  • Run the application
At the end of the course, participants will be able to
  1. Understand the fundamentals of Angular Forms and its architecture
  2. Present data in beautiful, interactive lists
  3. Build forms and setting pages
  4. Own controllers like model popup
  5. Build own Accordion
  6. Build own tabs
  7. Build own Alerts